<template>
  <div class="video-player-container" @mouseenter="showControls = true" @mouseleave="handleMouseLeave">
    <video 
      ref="videoElement" 
      class="video-element"
      @timeupdate="updateProgress"
      @loadedmetadata="onMetadataLoaded"
      @waiting="isBuffering = true"
      @playing="isBuffering = false"
      @ended="onVideoEnded"
    ></video>
    
    <!-- 加载/缓冲指示器 -->
    <div v-if="isLoading || isBuffering" class="loading-indicator">
      <div class="spinner"></div>
    </div>
    
    <!-- 自定义控制条 -->
    <div v-if="showControls" class="custom-controls" @mouseenter.stop="showControls = true" @mouseleave.stop>
      <!-- 顶部信息栏 -->
      <div class="top-bar">
        <div class="video-title">{{ videoTitle || '正在播放' }}</div>
      </div>
      
      <!-- 中央播放按钮 -->
      <div class="center-controls">
        <button 
          class="play-pause-btn center-btn"
          @click="togglePlayPause"
        >
          {{ isPlaying ? '⏸️' : '▶️' }}
        </button>
      </div>
        
        <!-- 底部控制栏 -->
        <div class="bottom-bar">
          <!-- 进度条 -->
          <div 
            class="progress-container" 
            @click="seekToPosition"
            @mousemove="showProgressTooltip"
            @mouseleave="hideProgressTooltip"
          >
            <div class="progress-bar">
              <div 
                class="progress-filled" 
                :style="{ width: progressPercent + '%' }"
              ></div>
              <div 
                class="progress-handle" 
                :style="{ left: progressPercent + '%' }"
                @mousedown="startDragging"
              ></div>
            </div>
            
            <!-- 进度预览工具提示 -->
            <div 
              v-if="showPreview && duration > 0" 
              class="progress-tooltip"
              :style="{ left: previewPosition + '%' }"
            >
              <div class="tooltip-time">{{ formatTime(previewTime) }}</div>
              <div class="tooltip-triangle"></div>
            </div>
            
            <div class="time-display">
              <span class="current-time">{{ formatTime(currentTime) }}</span>
              <span class="total-time">{{ formatTime(duration) }}</span>
            </div>
          </div>
          
          <div class="control-buttons">
          <button class="control-btn" @click="togglePlayPause">
            {{ isPlaying ? '⏸️' : '▶️' }}
          </button>
          
          <div class="volume-control">
            <button class="control-btn" @click="toggleMute">
              {{ isMuted ? '🔇' : '🔊' }}
            </button>
            <input 
              type="range" 
              min="0" 
              max="1" 
              step="0.05" 
              v-model="volume"
              class="volume-slider"
              @input="updateVolume"
            >
          </div>
          
          <div class="speed-control">
            <button class="control-btn speed-btn" @click="toggleSpeedMenu">
              {{ playbackSpeed }}x
            </button>
            <div v-if="showSpeedMenu" class="speed-menu">
              <button 
                v-for="speed in speedOptions" 
                :key="speed"
                class="speed-option"
                @click="setPlaybackSpeed(speed)"
              >
                {{ speed }}x
              </button>
            </div>
          </div>
          
          <button class="control-btn" @click="toggleFullScreen">
            ⛶
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { useRoute } from 'vue-router'
import Hls from 'hls.js'

const route = useRoute()
const videoName = ref(route.params.videoName)
const videoBaseUrl = 'http://192.168.75.26:8003/api/video/play/'
const videoSrc = ref(videoBaseUrl + videoName.value + '.m3u8')
const hls = ref(null)
const videoElement = ref(null)
const videoTitle = ref('')

// 播放状态
const isPlaying = ref(false)
const isMuted = ref(false)
const volume = ref(1)
const currentTime = ref(0)
const duration = ref(0)
const progressPercent = ref(0)
const showControls = ref(true)
const controlTimeout = ref(null)
const isBuffering = ref(false)
const isLoading = ref(true)

// 预览相关
const showPreview = ref(false)
const previewTime = ref(0)
const previewPosition = ref(0)

// 播放速度
const playbackSpeed = ref(1)
const showSpeedMenu = ref(false)
const speedOptions = [0.5, 0.75, 1, 1.25, 1.5, 2]

// 拖动状态
const isDragging = ref(false)

// 网络状态检测
const isOnline = ref(navigator.onLine)
const retryCount = ref(0)
const maxRetries = 3
const retryDelay = ref(2000) // 2秒
const bufferInfo = ref({
  level: 0,
  bufferLength: 0
})

// 监听网络状态变化
const handleNetworkChange = () => {
  isOnline.value = navigator.onLine
  
  if (isOnline.value && retryCount.value < maxRetries && isLoading.value) {
    // 网络恢复，尝试重新加载视频
    setTimeout(() => {
      if (hls.value) {
        hls.value.loadSource(videoSrc.value)
        hls.value.startLoad()
        retryCount.value++
      }
    }, retryDelay.value)
  } else if (!isOnline.value) {
    // 网络断开，显示提示
    const video = videoElement.value
    if (video && isPlaying.value) {
      video.pause()
      isPlaying.value = false
    }
  }
}

const initializeHls = () => {
  const video = videoElement.value
  isLoading.value = true
  retryCount.value = 0

  // 监听网络状态变化
  window.addEventListener('online', handleNetworkChange)
  window.addEventListener('offline', handleNetworkChange)

  if (!Hls.isSupported()) {
    console.warn('HLS not supported in this browser')
    video.src = videoSrc.value
    video.load()
    return
  }

  // 配置HLS参数，优化缓冲体验
  const hlsConfig = {
    // 增加最大缓冲时间
    maxBufferLength: 60, // 最大缓冲60秒
    // 增加加载超时时间
    maxMaxBufferLength: 120, // 允许的最大缓冲时间
    // 减少开始加载的缓冲大小
    startFragPrefetch: true,
    // 设置自动级别切换策略
    autoLevelEnabled: true,
    // 初始加载级别（如果有多个质量级别）
    startLevel: -1, // -1表示自动选择
    // 缓冲阈值，当缓冲区低于此值时触发加载
    lowBufferWatchdogPeriod: 1, // 1秒
    // 增加重试次数
    fragLoadingMaxRetry: 5,
    // 调整重试延迟
    fragLoadingRetryDelay: 1000,
    // 增加碎片加载超时
    fragLoadingTimeout: 20000,
    // 允许在缓冲区中保留更多片段
    highBufferWatchdogPeriod: 3,
    // 增加加载线程数
    maxLoadingThreads: 10
  }

  hls.value = new Hls(hlsConfig)

  // 优化加载策略
  hls.value.loadSource(videoSrc.value)
  hls.value.attachMedia(video)

  // 监听HLS事件
  hls.value.on(Hls.Events.MANIFEST_PARSED, (event, data) => {
    isLoading.value = false
    videoTitle.value = videoName.value.replace(/_/g, ' ')
    
    // 设置初始播放质量级别信息
    if (data.levels && data.levels.length > 0) {
      bufferInfo.value.level = hls.value.currentLevel
    }
    
    // 预加载下一个可能的片段
    hls.value.startLoad()
  })

  // 监听加载进度
  hls.value.on(Hls.Events.FRAG_LOADED, (event, data) => {
    // 更新缓冲信息
    if (video.buffered.length > 0) {
      const bufferedEnd = video.buffered.end(video.buffered.length - 1)
      bufferInfo.value.bufferLength = bufferedEnd - video.currentTime
    }
  })

  // 监听级别切换
  hls.value.on(Hls.Events.LEVEL_SWITCHED, (event, data) => {
    bufferInfo.value.level = data.level
  })

  // 优化错误处理和自动恢复
  hls.value.on(Hls.Events.ERROR, (event, data) => {
    console.error('HLS error', event, data)
    
    // 根据错误类型进行处理
    if (data.fatal) {
      switch (data.type) {
        case Hls.ErrorTypes.NETWORK_ERROR:
          console.error('网络错误，尝试重试...')
          // 网络错误，尝试重新加载
          if (retryCount.value < maxRetries) {
            isLoading.value = true
            setTimeout(() => {
              hls.value.loadSource(videoSrc.value)
              hls.value.attachMedia(video)
              hls.value.on(Hls.Events.MANIFEST_PARSED, () => {
                isLoading.value = false
                // 恢复之前的播放位置
                if (currentTime.value > 0) {
                  video.currentTime = currentTime.value
                  if (isPlaying.value) {
                    video.play()
                  }
                }
              })
              retryCount.value++
              // 递增重试延迟
              retryDelay.value *= 2
            }, retryDelay.value)
          } else {
            console.error('达到最大重试次数')
            isLoading.value = false
            // 可以添加用户提示，如"播放失败，请检查网络连接后重试"
          }
          break
        case Hls.ErrorTypes.MEDIA_ERROR:
          console.error('媒体错误')
          isLoading.value = false
          // 尝试恢复播放
          video.pause()
          video.currentTime += 0.1
          video.play()
          break
        default:
          isLoading.value = false
          console.error('未处理的致命错误')
          hls.value.destroy()
          break
      }
    } else {
      // 非致命错误，通常可以自动恢复
      switch (data.type) {
        case Hls.ErrorTypes.NETWORK_ERROR:
          // 网络请求错误，可能是临时问题
          console.warn('非致命网络错误')
          break
        case Hls.ErrorTypes.MEDIA_ERROR:
          // 媒体解码错误，可以尝试跳过有问题的片段
          if (data.details === Hls.ErrorDetails.BUFFER_APPEND_ERROR) {
            console.warn('缓冲区追加错误，跳过当前片段')
            if (hls.value) {
              hls.value.nextLevelSwitch()
            }
          }
          break
      }
    }
  })
}

// 清理网络状态监听器
const cleanupNetworkListeners = () => {
  window.removeEventListener('online', handleNetworkChange)
  window.removeEventListener('offline', handleNetworkChange)
}

// 播放/暂停切换
const togglePlayPause = () => {
  const video = videoElement.value
  if (!video) return
  
  if (isPlaying.value) {
    video.pause()
  } else {
    video.play().catch(err => {
      console.error('播放失败', err)
      // 在某些浏览器中需要用户交互才能播放视频
      if (err.name === 'NotAllowedError') {
        showControls.value = true
      }
    })
  }
  isPlaying.value = !isPlaying.value
  resetControlTimeout()
}

// 更新进度条
const updateProgress = () => {
  const video = videoElement.value
  if (!video || isDragging.value) return
  
  currentTime.value = video.currentTime
  duration.value = video.duration || 0
  progressPercent.value = (currentTime.value / duration.value) * 100 || 0
}

// 跳转到指定位置
const seekToPosition = (event) => {
  const video = videoElement.value
  if (!video) return
  
  const progressBar = event.currentTarget
  const rect = progressBar.getBoundingClientRect()
  const clickPosition = (event.clientX - rect.left) / rect.width
  const seekTime = clickPosition * duration.value
  
  video.currentTime = seekTime
  updateProgress()
  resetControlTimeout()
}

// 开始拖动进度条
const startDragging = (event) => {
  event.stopPropagation()
  isDragging.value = true
  document.addEventListener('mousemove', handleDrag)
  document.addEventListener('mouseup', stopDragging)
}

// 处理拖动
const handleDrag = (event) => {
  const video = videoElement.value
  if (!video || !isDragging.value) return
  
  const progressBar = document.querySelector('.progress-bar')
  const rect = progressBar.getBoundingClientRect()
  let dragPosition = (event.clientX - rect.left) / rect.width
  
  // 限制在0-1范围内
  dragPosition = Math.max(0, Math.min(1, dragPosition))
  
  progressPercent.value = dragPosition * 100
  currentTime.value = dragPosition * duration.value
}

// 停止拖动
const stopDragging = () => {
  const video = videoElement.value
  if (!video || !isDragging.value) return
  
  isDragging.value = false
  video.currentTime = currentTime.value
  document.removeEventListener('mousemove', handleDrag)
  document.removeEventListener('mouseup', stopDragging)
  resetControlTimeout()
}

// 切换静音
const toggleMute = () => {
  const video = videoElement.value
  if (!video) return
  
  video.muted = !video.muted
  isMuted.value = video.muted
  resetControlTimeout()
}

// 更新音量
const updateVolume = () => {
  const video = videoElement.value
  if (!video) return
  
  video.volume = volume.value
  isMuted.value = volume.value === 0
  resetControlTimeout()
}

// 格式化时间显示
const formatTime = (timeInSeconds) => {
  if (isNaN(timeInSeconds)) return '0:00'
  
  const minutes = Math.floor(timeInSeconds / 60)
  const seconds = Math.floor(timeInSeconds % 60)
  return `${minutes}:${seconds.toString().padStart(2, '0')}`
}

// 切换全屏
const toggleFullScreen = () => {
  const container = document.querySelector('.video-player-container')
  
  if (!document.fullscreenElement) {
    container.requestFullscreen().catch(err => {
      console.error(`全屏错误: ${err.message}`)
    })
  } else {
    document.exitFullscreen()
  }
  resetControlTimeout()
}

// 键盘事件处理
const handleKeyDown = (event) => {
  // 仅在控制条显示或视频元素焦点时响应快捷键
  if (!showControls.value && document.activeElement !== videoElement.value) return
  
  switch (event.key.toLowerCase()) {
    case ' ': // 空格键播放/暂停
    case 'k':
      event.preventDefault()
      togglePlayPause()
      break
    case 'arrowright': // 右箭头快进
      skipForward()
      break
    case 'arrowleft': // 左箭头快退
      skipBackward()
      break
    case 'arrowup': // 上箭头增加音量
      increaseVolume()
      break
    case 'arrowdown': // 下箭头减小音量
      decreaseVolume()
      break
    case 'f': // F键全屏
      toggleFullScreen()
      break
    case 'm': // M键静音
      toggleMute()
      break
    case '0': // 0键回到开始
      seekTo(0)
      break
    case '1':
    case '2':
    case '3':
    case '4':
    case '5':
    case '6':
    case '7':
    case '8':
    case '9': // 数字键1-9跳转到相应百分比位置
      seekTo(parseInt(event.key) * 0.1 * duration.value)
      break
  }
}

// 快进
const skipForward = (seconds = 10) => {
  const video = videoElement.value
  if (!video) return
  
  video.currentTime = Math.min(video.currentTime + seconds, duration.value)
  updateProgress()
  resetControlTimeout()
}

// 快退
const skipBackward = (seconds = 10) => {
  const video = videoElement.value
  if (!video) return
  
  video.currentTime = Math.max(video.currentTime - seconds, 0)
  updateProgress()
  resetControlTimeout()
}

// 增加音量
const increaseVolume = () => {
  const video = videoElement.value
  if (!video) return
  
  volume.value = Math.min(volume.value + 0.1, 1)
  updateVolume()
  resetControlTimeout()
}

// 减小音量
const decreaseVolume = () => {
  const video = videoElement.value
  if (!video) return
  
  volume.value = Math.max(volume.value - 0.1, 0)
  updateVolume()
  resetControlTimeout()
}

// 跳转到指定时间
const seekTo = (time) => {
  const video = videoElement.value
  if (!video) return
  
  video.currentTime = time
  updateProgress()
  resetControlTimeout()
}

// 播放进度条悬停预览
const showProgressTooltip = (event) => {
  if (isDragging.value) return
  
  const progressBar = document.querySelector('.progress-bar')
  const rect = progressBar.getBoundingClientRect()
  const mousePosition = (event.clientX - rect.left) / rect.width
  const calculatedPreviewTime = mousePosition * duration.value
  
  // 更新预览时间和位置
  previewTime.value = calculatedPreviewTime
  previewPosition.value = mousePosition * 100
  showPreview.value = true
}

// 隐藏进度条悬停预览
const hideProgressTooltip = () => {
  if (isDragging.value) return
  showPreview.value = false
}

// 切换速度菜单
const toggleSpeedMenu = () => {
  showSpeedMenu.value = !showSpeedMenu.value
  resetControlTimeout()
}

// 设置播放速度
const setPlaybackSpeed = (speed) => {
  const video = videoElement.value
  if (!video) return
  
  video.playbackRate = speed
  playbackSpeed.value = speed
  showSpeedMenu.value = false
  resetControlTimeout()
}

// 处理鼠标离开事件
const handleMouseLeave = () => {
  if (isPlaying.value) {
    setTimeout(() => {
      showControls.value = false
    }, 3000)
  }
}

// 重置控制条显示超时
const resetControlTimeout = () => {
  if (controlTimeout.value) {
    clearTimeout(controlTimeout.value)
  }
  
  if (isPlaying.value) {
    controlTimeout.value = setTimeout(() => {
      showControls.value = false
    }, 3000)
  }
}

// 视频元数据加载完成
const onMetadataLoaded = () => {
  const video = videoElement.value
  if (!video) return
  
  duration.value = video.duration
  isLoading.value = false
}

// 视频播放结束
const onVideoEnded = () => {
  isPlaying.value = false
  showControls.value = true
}

onMounted(() => {
    initializeHls()
    // 添加键盘事件监听
    document.addEventListener('keydown', handleKeyDown)
    // 添加全屏变化事件监听
    document.addEventListener('fullscreenchange', handleFullscreenChange)
    document.addEventListener('webkitfullscreenchange', handleFullscreenChange)
    document.addEventListener('mozfullscreenchange', handleFullscreenChange)
    document.addEventListener('MSFullscreenChange', handleFullscreenChange)
    
    // 移动设备上自动显示控制界面
    const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
    if (isMobile) {
      videoControlsVisible.value = true
    }
  })

  onBeforeUnmount(() => {
    // 清理键盘事件监听
    document.removeEventListener('keydown', handleKeyDown)
    // 清理全屏变化事件监听
    document.removeEventListener('fullscreenchange', handleFullscreenChange)
    document.removeEventListener('webkitfullscreenchange', handleFullscreenChange)
    document.removeEventListener('mozfullscreenchange', handleFullscreenChange)
    document.removeEventListener('MSFullscreenChange', handleFullscreenChange)
    
    // 清理网络状态监听器
    cleanupNetworkListeners()
    
    if (hls.value) {
      hls.value.destroy()
    }
    if (controlTimeout.value) {
      clearTimeout(controlTimeout.value)
    }
  })

// 处理全屏变化
const handleFullscreenChange = () => {
  // 全屏变化时可以添加额外的样式调整
  if (document.fullscreenElement) {
    // 进入全屏
    document.body.style.overflow = 'hidden'
  } else {
    // 退出全屏
    document.body.style.overflow = 'auto'
  }
}
</script>

<style scoped>
.video-player-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #000;
  position: relative;
  margin: 0;
  padding: 0;
  cursor: pointer;
  /* 防止移动设备上的文本选择 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.video-element {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7);
  /* 移动设备上优化触摸体验 */
  touch-action: manipulation;
}

/* 加载指示器 */
.loading-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spinner {
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top: 3px solid #fff;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 自定义控制条 */
.custom-controls {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  z-index: 5;
  transition: opacity 0.2s ease;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
}

/* 顶部信息栏 */
.top-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 10px 20px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
}

.video-title {
  color: white;
  font-size: 16px;
  font-weight: 500;
}

/* 中央播放按钮 */
.center-controls {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.center-btn {
  background: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  color: white;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.center-btn:hover {
  background: rgba(0, 0, 0, 0.7);
  transform: scale(1.1);
}

/* 底部控制栏 */
.bottom-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 20px 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
}

/* 进度条 */
.progress-container {
  margin-bottom: 10px;
  cursor: pointer;
}

.progress-bar {
  position: relative;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  margin-bottom: 5px;
}

.progress-filled {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #ff6b6b;
  border-radius: 2px;
  transition: width 0.1s linear;
}

.progress-handle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background: #ff6b6b;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.progress-container:hover .progress-handle {
  opacity: 1;
}

.progress-handle:hover {
  transform: translate(-50%, -50%) scale(1.2);
}

/* 进度预览工具提示 */
.progress-tooltip {
  position: absolute;
  bottom: 30px;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  pointer-events: none;
  z-index: 20;
  white-space: nowrap;
}

.tooltip-triangle {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(0, 0, 0, 0.9);
}

/* 时间显示 */
.time-display {
  display: flex;
  justify-content: space-between;
  color: white;
  font-size: 12px;
}

/* 控制按钮组 */
.control-buttons {
  display: flex;
  align-items: center;
  gap: 15px;
  color: white;
}

.control-btn {
  background: none;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
  padding: 5px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.control-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* 音量控制 */
.volume-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.volume-slider {
  width: 80px;
  cursor: pointer;
}

/* 速度控制 */
.speed-control {
  position: relative;
}

.speed-menu {
  position: absolute;
  bottom: 100%;
  left: 0;
  background: rgba(0, 0, 0, 0.9);
  border-radius: 4px;
  padding: 5px 0;
  margin-bottom: 5px;
  z-index: 10;
}

.speed-option {
  display: block;
  width: 80px;
  padding: 8px 12px;
  text-align: center;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s ease;
}

.speed-option:hover {
  background: rgba(255, 255, 255, 0.2);
}

.speed-btn {
  min-width: 60px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .video-element {
    width: 100%;
    height: auto;
    max-height: 80vh;
  }
  
  .video-title {
    font-size: 14px;
    max-width: 60%;
  }
  
  .control-buttons {
    gap: 10px;
  }
  
  .control-btn {
    font-size: 16px;
  }
  
  .play-pause-btn {
    font-size: 20px;
  }
  
  .volume-slider {
    width: 60px;
  }
  
  .time-display {
    font-size: 12px;
  }
  
  /* 隐藏部分非关键控制元素 */
  .speed-control {
    display: none;
  }
  
  .center-btn {
    width: 60px;
    height: 60px;
    font-size: 20px;
  }
  
  .custom-controls {
    padding: 5px 10px;
  }
}

@media (max-width: 480px) {
  .video-element {
    border-radius: 0;
    max-height: 100vh;
  }
  
  .top-bar, .bottom-bar {
    padding: 10px;
  }
  
  .video-title {
    font-size: 12px;
    max-width: 50%;
  }
  
  .control-buttons {
    gap: 8px;
  }
  
  .control-btn {
    font-size: 16px;
    padding: 4px;
    min-width: 36px;
    min-height: 36px;
  }
  
  .play-pause-btn {
    font-size: 22px;
  }
  
  /* 简化控制界面，只保留最基本的控制元素 */
  .time-display {
    display: none;
  }
  
  .volume-control {
    display: none;
  }
  
  .progress-handle {
    width: 14px;
    height: 14px;
  }
  
  .center-btn {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }
  
  .loading-indicator {
    width: 50px;
    height: 50px;
  }
  
  /* 移动设备上增大触摸区域 */
  .progress-bar {
    height: 10px;
  }
}

/* 横屏移动设备样式 */
@media (max-height: 480px) and (orientation: landscape) {
  .video-player-container {
    min-height: 100vh;
    height: 100vh;
  }
  
  .video-element {
    max-height: 100vh;
    height: 100vh;
  }
  
  .top-bar, .bottom-bar {
    padding: 8px;
  }
  
  .control-buttons {
    gap: 6px;
  }
  
  .speed-control {
    display: none;
  }
}</style>